<!-- 我的咨询 -->
<template>
	<scroll-view @scrolltolower="onLower" @refresherrefresh="onRefresh" refresher-enabled="true"
		:refresher-threshold="40" :refresher-triggered="triggered" scroll-y="true" :style="{height: pageHeight - 130 + 'px'}">
		<uni-card v-for="(item,index) in listData" :key="index" spacing="0" :is-shadow="false"
			:border="false" class="layout-dom">
			<navigator :url="'/pages/student/consult/advisory/details?itemID=' + item.id + '&jobseekerId=' + item.jobseekerId" hover-class="none">
				<view class="item-dom">
					<view class="slot-title">
						<view class="flex-row flex-row-space-between">
							<text class="title">{{item.consultationPurpose}}</text>
							<text :class="item.reservationStatus == 'ACCEPTED' ? 'status' : 'status1'">{{listTypeValue(item.reservationStatus)}}</text>
						</view>
					</view>
					<view class="flex-row">
						<text class="iconfont icon-zhuanjiaguanli" style="padding-right: 15rpx; color: #01c2b7"></text>
						<text>咨询专家： {{item.receiveExpertName}}</text>
					</view>
					<view class="flex-row">
						<text class="iconfont icon-shijian" style="padding-right: 15rpx; color: #01c2b7"></text>
						<text>咨询时间： {{item.consultationTime}}</text>
					</view>
					<view class="flex-row">
						<text class="iconfont icon-describe" style="padding-right: 15rpx; color: #01c2b7"></text>
						<text>具体问题： {{item.concreteProblems}}</text>
					</view>
				</view>
			</navigator>

		</uni-card>
	</scroll-view>

	<uinloadmore :status="status" />

</template>

<script lang="ts" setup>
	import uinloadmore from "@/components/uni/uni-load-more";
	import { getDictTypeList, getUser } from "@/utils/storage"
	import { Consult } from "@/api/tables/Consult"
	import { consultPage } from "@/api/consult"
	import { ref, computed, onBeforeMount } from 'vue'
	
	let userData = getUser()
	let pageHeight = ref(90)
	let listType = ref([])
	let listData = ref<Array<Consult>>([])
	let total = ref(0)
	let pagination = ref({ current: 1, size: 10 })
	const triggered = ref<boolean>(false)
	let status = ref('noMore')
	
	const listTypeValue = computed(() => (key : string) => {
		let list = listType.value.filter(item => item.value == key)
		if (list.length) {
			return list[0].text
		}
		return ''
	})
	
	onBeforeMount(() => {
		getDictTypeList('EXPERT_CONSULTATION_STATUS').then(res => { listType.value = res })
		// 获取当前窗口高度
		pageHeight.value = uni.getSystemInfoSync().windowHeight
		// 监听窗口大小的变化
		uni.onWindowResize((res) => {
			pageHeight.value = res.size.windowHeight
		})
		getListData()
	})
	
	// 上拉加载
	function onLower() {
		if (total.value <= listData.value.length) {
			status.value = 'noMore'
		} else {
			status.value = 'loading'
			pagination.value.current++
			getListData()
		}
	}
	// 下拉刷新
	function onRefresh() {
		pagination.value.current = 1
		triggered.value = true
		getListData()
	}

	function getListData() {
		consultPage({
			jobseekerId: userData.userId,
			...pagination.value
		}).then(res => {
			if (res.code == '200') {
				let list = res.data.records
				listData.value = triggered.value ? list : listData.value.concat(list)
				total.value = res.data.total
				status.value = res.data.total <= listData.value.length ? 'noMore' : 'more'
				triggered.value = false
			}
		})
	}
</script>

<style lang="scss" scoped>
	.item-dom {
		font-size: 28rpx;
		color: #999999;
		font-family: "微软雅黑";

		.title {
			font-size: 30rpx;
			line-height: 2;
			color: #131313;
			font-weight: 600;
		}

		.status {
			font-size: 26rpx;
			font-weight: 600;
			color: #01c2b7;
		}
		.status1{
			font-size: 26rpx;
			font-weight: 600;
			color: #FF5722;
		}
	}
	.slot-title{
		.title {
			max-width: calc(100% - 60px); 
		}
	}
</style>